<template>
    <div :class="['blog-html-page-pc', className]" v-html="html"></div>
</template>

<script>
import { flyImg } from '@/components/flyImg/index.js'
export default {
    props: {
        html: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            className: this.createId(),
        }
    },
    watch: {
        html: {
            handler(val) {
                if (val) {
                    this.init()
                }
            },
            immediate: true,
        },
    },
    methods: {
        async init() {
            await this.$nextTick()
            let imgList = document.querySelectorAll(`.${this.className} img`)
            let imgListArr = Array.from(imgList)
            // 设置图片预览与位置监听
            for (let i = 0; i < imgListArr.length; i++) {
                let item = imgListArr[i]
                item.onclick = () => {
                    // this.prevewImg(item)
                    flyImg(item)
                }
                let ob = new IntersectionObserver((entries) => {
                    let enter = entries[0]
                    if (enter.isIntersecting) {
                        let src = $(item).attr('data-src')
                        item.src = src
                        $(item).css({
                            opacity: 1,
                        })
                        ob.unobserve(item)
                    }
                })
                ob.observe(item)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.blog-html-page-pc {
    padding: 0;
    border: none;
}
</style>
